<div class="custom-checks">
  <ng-container *ngIf="!emptyMetrics; else emptyMetricsTpl">
    <header class="custom-checks__header">
      <button
        color="cyan"
        class="custom-checks__button"
        hs-button
        (click)="onOpenSetting()"
      >
        Custom metrics
      </button>
    </header>
    <div class="custom-checks__body">
      <ng-container *ngIf="loading">
        <div class="custom-checks__loader">
          <hs-loader class="custom-checks__loader-icon"></hs-loader>
        </div>
      </ng-container>

      <ng-container *ngIf="!noData; else noDataTpl">
        <hs-custom-check
          *ngFor="let check of customChecks | keyvalue; trackBy: trackByFn"
          [check]="check.value"
        >
        </hs-custom-check>
      </ng-container>
    </div>
  </ng-container>
</div>

<ng-template #emptyMetricsTpl>
  <div class="custom-checks__empty">
    <div class="custom-checks__alert">
      Custom metric list is empty
    </div>
    <button
      class="custom-checks__button"
      color="cyan"
      kind="flat"
      hs-button
      (click)="onOpenSetting()"
    >
      Add metric
    </button>
  </div>
</ng-template>
<ng-template #noDataTpl>
  <div class="custom-checks__empty">
    <div class="custom-checks__alert">
      Waiting data
    </div>
  </div>
</ng-template>
